<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>404 Not Found</title>
	<style>
		body {
			background-color: #fdeff1;
			text-align: center;
			
		}
		
		h1 {
			margin-top: 80px;
			font-size: 72px;
			color: #e84c6d;
			font-family: KaiTi_GB2312;
		}
		
		p {
			font-size: 24px;
			color: #666;
			margin-top: 40px;
			font-family: KaiTi_GB2312;
		}
		
		form {
			display: inline-block;
			margin-top: 40px;
		}
		
		input[type="text"] {
			padding: 10px;
			border-radius: 5px;
			border: none;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			width: 200px;
			font-size: 18px;
			color: #777;
			outline: none;
			transition: box-shadow 0.3s ease-out;
		}
		
		input[type="text"]:focus {
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}
		
		button {
			display: inline-block;
			padding: 10px 20px;
			border-radius: 5px;
			background-color: #e84c6d;
			color: #fff;
			font-size: 20px;
			border: none;
			cursor: pointer;
			margin-left: 10px;
			transition: background-color 0.3s ease-out;
		}
		
		button:hover {
			background-color: #d43d5e;
		}
	</style>
</head>
<body>
	<h1>Oops! 404 Not Found</h1>
	<p>哎呀,蝶妹妹找不到你要哒页面啦，但是可以在下面上网搜索其他好玩哒啦～～</p>
	<div class="search-box">
		<form id="search-form" method="get" action="https://www.so.com/s">
			<input type="text" name="q" placeholder="在这里输入关键词搜索啦～～">
			<button type="submit">搜索</button>
</body>
</html>